<!-- 服务器配置文件 gui 铁锈战争 rw -->
<template>
    <div style="margin: 0 0 20px;">
        <n-button type="primary" size="small" @click="handleValidateButtonClick">
            <template #icon>
                <i class="iconfont icon-zhengque"></i>
            </template>
            保存
        </n-button>
        （停止再修改，否则文件占用导致修改不成功！）
    </div>


    <n-form ref="formRef" :inline="false" :model="formValue" :rules="rules" size="small">

        <n-form-item path="ServerName" label="服务器名字">
            <n-input placeholder="请输入服务器名字" v-model:value="formValue['ServerName']">
                <template #prefix>
                    <i class="iconfont icon-bianji0"></i>
                </template>
            </n-input>
        </n-form-item>

        <n-form-item path="Subtitle" label="服务器副标题">
            <n-input-group>
                <n-input placeholder="请输入服务器副标题" v-model:value="formValue['Subtitle']">
                    <template #prefix>
                        <i class="iconfont icon-peishushuju"></i>
                    </template>
                </n-input>
            </n-input-group>
        </n-form-item>

        <n-form-item path="Passwd" label="服务器密码">
            <n-input-group>
                <n-input placeholder="请输入服务器密码" v-model:value="formValue['Passwd']">
                    <template #prefix>
                        <i class="iconfont icon-permissions"></i>
                    </template>
                </n-input>
                <n-input-group-label>留空就是没有</n-input-group-label>
            </n-input-group>
        </n-form-item>

        <n-form-item path="OneAdmin" label="第一进入管理员">
            <template #label>
                <i class="iconfont icon-liuliangfanzuobi"></i>
                第一进入管理员
            </template>
            <n-radio-group v-model:value="formValue['OneAdmin']">
                <n-radio-button :value="true" label="开启" />
                <n-radio-button :value="false" label="关闭" />
            </n-radio-group>
        </n-form-item>

        <n-form-item path="MaxPlayer" label="最大玩家人数">
            <template #label>
                <i class="iconfont icon-renshu"></i>
                最大玩家人数:（{{ formValue['MaxPlayer'] }}）
            </template>
            <n-slider v-model:value="formValue['MaxPlayer']" :step="1" :min="1" :max="10"></n-slider>
        </n-form-item>

        <n-form-item path="AutoStartMinPlayerSize" label="自动启动最小玩家大小">
            <template #label>
                <i class="iconfont icon-renshu"></i>
                自动启动最小玩家大小:（{{ formValue['AutoStartMinPlayerSize'] }}）
            </template>
            <n-slider v-model:value="formValue['AutoStartMinPlayerSize']" :step="1" :min="2" :max="10"></n-slider>
        </n-form-item>

        <n-form-item path="DefIncome" label="默认玩家收入速度">
            <template #label>
                <i class="iconfont icon-sudu"></i>
                默认玩家收入速度
            </template>
            <n-select v-model:value="formValue['DefIncome']"
                :options="[1.0, 1.5, 2.0, 2.5, 3, 4, 5, 10, 15, 20, 30, 40, 50, 100, 200].map(v => ({ label: v + 'x', value: v }))"
                placeholder="请选默认玩家收入速度" />
        </n-form-item>


        <n-form-item path="SaveRePlayFile" label="保存重放文件">
            <template #label>
                <i class="iconfont icon-baocun"></i>
                保存重放文件
            </template>
            <n-radio-group v-model:value="formValue['SaveRePlayFile']">
                <n-radio-button :value="true" label="开启" />
                <n-radio-button :value="false" label="关闭" />
            </n-radio-group>
        </n-form-item>


        <n-form-item path="AutoReLoadMap" label="自动重新加载地图">
            <template #label>
                <i class="iconfont icon-baimingdan"></i>
                自动重新加载地图
            </template>
            <n-radio-group v-model:value="formValue['AutoReLoadMap']">
                <n-radio-button :value="true" label="开启" />
                <n-radio-button :value="false" label="关闭" />
            </n-radio-group>
        </n-form-item>

        <n-form-item path="Port" label="服务器端口（ipv4）">
            <n-input size="medium" placeholder="请输入服务器端口" v-model:value="formValue['Port']">
                <template #prefix>
                    <i class="iconfont icon-wangluoduankou"></i>
                </template>
            </n-input>
        </n-form-item>

        <n-form-item path="MaxUnit" label="最大单位">
            <template #label>
                <i class="iconfont icon-renshu"></i>
                最大单位:（{{ formValue['MaxUnit'] }}）
            </template>
            <n-slider v-model:value="formValue['MaxUnit']" :step="1" :min="1" :max="1000"></n-slider>
        </n-form-item>



    </n-form>
</template>
  
<script setup>
import { ref, reactive, toRaw } from 'vue';
import { useMessage } from "naive-ui";

const emits = defineEmits(['result']);

const props = defineProps({
    config: Object
});

const message = useMessage();
const formRef = ref(null);
let formValue = reactive(props.config);//配置的变量
const rules = {
    'ServerName': {
        required: true,
        message: "请输入正确的服务器名字",
        trigger: ["input", "blur"]
    },
    'Subtitle': {
        required: false,
        message: "请输入正确的服务器副标题",
        trigger: ["input", "blur"]
    },
    'Passwd': {
        required: false,
        validator(rule, value) {
            if (!/^[\w]*$/.test(value)) {
                return new Error("服务器端口应该为字母和数字");
            }
            return true;
        },
        message: "请输入正确的服务器密码",
        trigger: ["input", "blur"]
    },
    'OneAdmin': {
        required: true,
        validator(rule, value) {
            if (typeof value != 'boolean') {
                return new Error("请选择是否第一进入管理员");
            }
            return true;
        },
        message: "请选择是否第一进入管理员",
        trigger: ["change"]
    },
    'MaxPlayer': {
        required: true
    },
    'AutoStartMinPlayerSize': {
        required: true
    },
    'DefIncome': {
        required: true,
        validator(rule, value) {
            if (value === undefined) {
                return new Error("请选择默认玩家收入速度");
            }
            return true;
        },
        message: "请选择默认玩家收入速度",
        trigger: ["change"]
    },


    'SaveRePlayFile': {
        required: true,
        validator(rule, value) {
            if (typeof value != 'boolean') {
                return new Error("请选择是否开启保存重放文件");
            }
            return true;
        },
        message: "请选择是否开启保存重放文件",
        trigger: ["change"]
    },
    'AutoReLoadMap': {
        required: true,
        validator(rule, value) {
            if (typeof value != 'boolean') {
                return new Error("请选择是否自动重新加载地图");
            }
            return true;
        },
        message: "请选择是否自动重新加载地图",
        trigger: ["change"]
    },
    'Port': {
        required: true,
        validator(rule, value) {
            if (value === '') {
                return new Error("请输入正确的服务器端口");
            } else if (!/^\d*$/.test(value)) {
                return new Error("服务器端口应该为整数");
            }
            return true;
        },
        trigger: ["input", "blur"]
    },

    'MaxUnit': {
        required: true
    }
};//配置的监测规则


function handleValidateButtonClick() {
    formRef.value?.validate((errors) => {
        if (!errors) {
            message.success("保存成功");
            emits('result', toRaw(formValue));//传回事件
        } else {
            console.log(errors);
            message.error("请填写正确！");
        }
    });
}

</script>
  
<style lang="scss" scoped></style>